<template>
  <div class="module_container">
    <div class="module_title">
      <div class="title_text">历史火灾情况统计分析</div>
    </div>
    <!-- <dv-loading v-if="loading">Loading...</dv-loading> -->
    <div
      v-loading="loading"
      class="content"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <div class="sub_title">火灾发生时间统计</div>
      <div ref="bar" class="bar" />
      <div class="sub_title" style="margin-top: 40px">起火单位属性统计</div>
      <div class="ranking_box">
        <!-- <div v-for="(item, index) in policyList" -->
        <div
          v-for="(item, index) in fireProperty"
          :key="item.id"
          class="ranking"
          flex
        >
          <div class="margin_right_10" :class="index === 1 ? 'active' : ''">
            {{ index + 1 }}
            <!-- {{ item }} -->
          </div>
          <div
            class="text_over"
            style="
              display: flex;
              justify-content: space-between;
              align-content: center;
              padding-right: 30px;
            "
            :class="index === 1 ? 'active' : ''"
            @click="handleItemClick(item)"
          >
            <!-- {{ item.policyName }} -->
            <span>{{ item.policyName }}</span>
            <span>{{ item.num }}</span>
          </div>
        </div>
        <!-- <div class="modal">
          <div>aaaa</div>
        </div> -->
      </div>

      <div class="sub_title" style="margin-top: 40px">
        <!-- 各类型行政许可情况 -->
        火灾规模统计
      </div>

      <div class="legend_box_layout">
        <!-- <i
          class="left"
          flex="cross:center main:center"
          @click="handleLeft(true)"
        >
          <img src="@/assets/img_qingqin/modal/right.png" alt="" srcset="">
        </i>
        <i
          class="right"
          flex="cross:center main:center"
          @click="handleLeft(false)"
        >
          <img src="@/assets/img_qingqin/modal/right.png" alt="" srcset="">
        </i> -->
        <div ref="scroll_layout" class="scroll_layout">
          <div class="legend_box">
            <div
              v-for="(item, index) in fireDeaths"
              :key="index"
              flex="main:justify cross:center"
            >
              <div class="text_over" style="width: 190px" @click="handlefireDeathsItemClick(item)">
                {{ item.xkwjmc || "--" }}
              </div>
              <b
                class="flex_1"
                style="color: #00f7ff; font-size: 36px; width: 190px"
              >{{ item.num || "0" }}</b
              >
            </div>
          </div>
          <div v-if="false" class="legend_box">
            <div
              v-for="(item, index) in [
                { xkwjmc: '一般火灾', num: 37 },
                { xkwjmc: '重大火灾', num: 5 },
              ]"
              :key="index"
              flex="main:justify cross:center"
            >
              <div class="text_over" style="width: 190px">
                {{ item.xkwjmc || "较大火灾" }}
              </div>
              <b
                class="text_over"
                style="color: #00f7ff; font-size: 36px; width: 190px"
              >{{ item.num || "2" }}</b
              >
            </div>
          </div>
        </div>
      </div>

      <div class="sub_title">历史起火原因统计</div>
      <div flex="cross:center">
        <div class="l_circle" flex="cross:center main:center">
          <dv-active-ring-chart
            :config="config"
            style="width: 300px; height: 300px"
          />
          <!-- <p class="text">火灾案卷调查</p> -->
        </div>
        <ul class="flex_1 list_box">
          <li v-for="item in fireScale" :key="item.id" flex="main:justify">
            <span class="flex_1">{{ item.category || "category" }}</span>
            <span style="width: 150px">{{ item.num }}</span>
            <!-- <span style="width: 80px">{{ transPercent(item.percent) }}</span> -->
            <!-- <span style="width: 80px">{{ 'percent' }}</span> -->
          </li>
        </ul>
        <!-- <img src="@/assets/img_xinyong/module2/data_circle_bg.png" alt="" srcset=""> -->
      </div>
    </div>
    <Modal v-model="showModal" :title="modalTitle">
      <div class="table_detail">
        <!-- <div>返回</div> -->
        <div class="detail_content" style="line-height: 36px">
          <div flex style="color: #617b8f">
            <div class="flex_1">
              部门名称：<span
              >{{ tableData.deptName || "--"
              }}{{ tableData.scjgj_qyjbxx_zczjdw }}万</span
              >
            </div>
          </div>
          <div flex>
            <div class="flex_1">
              描述：<span>{{ (tableData.policyDesc || []).slice(0, 11) }}</span>
            </div>
          </div>
          <div flex>
            <div class="flex_1">
              标题名称：<span>{{ tableData.policyName || "--" }}</span>
            </div>
          </div>
          <div flex>
            <div class="flex_1">
              时间：<span>{{ tableData.validDate }}</span>
            </div>
          </div>
        </div>
      </div>
    </Modal>
    <Modal v-model="fireDeathsObj.modal" :title="fireDeathsObj.title">
      <div class="table_detail">
        <!-- <div>返回</div> -->
        <div class="detail_content" style="line-height: 36px">
          <div flex style="color: #617b8f">
            <div class="flex_1">
              火灾发生数：<span
              >{{ tableData.num || "0" }}</span
              >
            </div>
          </div>
          <div flex>
            <div class="flex_1">
              备注：<span>{{ tableData.remark }}</span>
            </div>
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import Modal from '@/components/Modal/index'
import { optionLine } from './module2_option.js'
// import Charts from '@jiaminghi/charts'
import Highcharts from '@/config/highCharts'
// import { categoryPercent, policyList, policyCashByMonth, adminLicenseCategorh } from '@/api/home'
import { getTotalByOrg, getTotalByReason, getTotalByScale, getTotalByYear } from '@/api/map'
export default {
  components: { Modal },
  data() {
    return {
      config: {
        data: [],
        lineWidth: 10
      },
      categoryOptions: [],
      policyList: [],
      licenseList: [],
      policyCashByMonthList: [],
      loading: true,
      showModal: false,
      modalTitle: '',
      tableData: {},
      fireProperty: [],
      fireScale: [],
      fireDeaths: [],
      fireDeathsObj: {
        modal: false,
        title: ''
      }
    }
  },
  computed: {
    licenseList1() {
      if (!this.licenseList.length) return []
      const length = Math.ceil(this.licenseList.length / 2)
      return this.licenseList.slice(0, length)
    },
    licenseList2() {
      if (!this.licenseList.length) return []
      const length = Math.ceil(this.licenseList.length / 2)
      return this.licenseList.slice(length)
    }
  },
  created() {
    const year = new Date().getFullYear()
    Promise.all([getTotalByOrg(), getTotalByReason(), getTotalByScale(), getTotalByYear({ year })]).then(
      (data) => {
        this.fireProperty = data[0].data.map((item) => {
          return {
            policyName: item.dict_label,
            num: item.count
          }
        })
        this.fireScale = data[1].data.map((item) => {
          return {
            category: item.dict_label,
            num: item.count
          }
        })
        this.fireDeaths = data[2].data.map((item) => {
          return {
            xkwjmc: item.dict_label,
            num: item.count,
            remark: item.remark
          }
        })
        optionLine.xAxis[0].categories = data[3].data.map(item => {
          return item.time.substr(item.time.lastIndexOf('-') + 1) + '月'
        })
        optionLine.series[0].data = data[3].data.map(item => item.count)
        this.config = {
          data: [
            {
              name: '已结案',
              value: 55
            },
            {
              name: '调查中',
              value: 120
            },
            {
              name: '待调查',
              value: 78
            }
          ],
          lineWidth: 10
        }
        this.$nextTick(() => {
          Highcharts.chart(this.$refs.bar, optionLine)
          this.loading = false
        })
      }
    ).finally(() => {
      this.loading = false
    })
  },
  methods: {
    transPercent(percent) {
      const num = percent * 100
      return num.toFixed(2) + '%'
    },

    handleItemClick(item) {
      this.showModal = true
      this.modalTitle = item.policyName
      this.tableData = item
    },
    handleLeft(isleft) {
      let px = isleft ? -830 : 830
      const val = this.$refs.scroll_layout.style.transform
      if (val) {
        const arr = val.split('translateX(')
        px += parseInt(arr[1])
      }
      if (Math.abs(px) > this.licenseList1.length * 380 || px === 830) return
      this.$refs.scroll_layout.style.transform = `translateX(${px}px)`
    },
    handlefireDeathsItemClick(item) {
      console.log(item)
      this.fireDeathsObj.modal = true
      this.fireDeathsObj.title = item.xkwjmc
      this.tableData = item
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  // margin-top: 20px;
  // position: relative;
  padding: 25px 40px 38px 40px;
  font-size: 28px;
  position: relative;

  ::v-deep .detail_content {
    line-height: 64px;
    color: #617b8f;
    & > div {
      margin-top: 20px;
    }
    span {
      color: #bfe3ff;
    }
  }
  .sub_title {
    margin-top: 20px;
    margin-bottom: 20px;
    background: url("~@/assets/img_xinyong/module6/sub_title_bg.png") no-repeat;
    width: 410px;
    height: 58px;
    line-height: 58px;
    // padding:20px;
    padding-left: 70px;
    font-size: 28px;
  }
  & > .bar {
    width: 100%;
    height: 240px;
    margin-bottom: 15px;
  }
  .legend_box_layout {
    width: 100%;
    overflow-x: hidden;
    position: relative;
    .scroll_layout {
      transition: all 0.5s linear;
    }
    &:hover {
      .left {
        opacity: 1;
        right: 0;
      }
      .right {
        opacity: 1;
        left: 0;
      }
    }
    .left,
    .right {
      background-size: 100% 100%;
      width: 80px;
      height: 80px;
      position: absolute;
      right: -20px;
      top: 50%;
      transform: translateY(-65%);
      cursor: pointer;
      z-index: 10;
      border-radius: 50%;
      background: rgba($color: #000000, $alpha: 0.2);
      text-align: center;
      opacity: 0;
      transition: all 0.5s linear;
      &:hover {
        background: rgba($color: #000000, $alpha: 0.6);
      }
    }
    .right {
      left: -20px;
      transform: translateY(-65%) rotateY(180deg);
    }
    .text_over{
      cursor: pointer;
    }
  }
  .legend_box {
    width: 840px;
    display: flex;
    // flex-wrap: wrap;
    // justify-content: space-between;
    position: relative;
    flex: 1;
    flex-wrap: wrap;
    // width: 1800px;
    & > * {
      margin-right: 20px;
      // width: 500px;
      line-height: 64px;
      color: #bfdaff;
      background: url("~@/assets/img_qingqin/module2/card_bg.png") no-repeat;
      background-size: 100% 100%;
      text-align: center;
      padding: 0 10px;
      box-sizing: border-box;
      margin-bottom: 24px;
    }
  }

  .ranking_box {
    height: 220px;
    overflow-y: auto;
    // .modal{
    //   position: absolute;
    //   top: 200px;
    //   left: 100%;
    //   width: 50%;
    //   height: 300px;
    //   z-index: 11;
    //   background: rgba(0, 102, 255, 0.658);
    // }
    .ranking {
      margin-bottom: 10px;
      color: #c0e6ff;
      & > *:first-child {
        width: 64px;
        height: 64px;
        text-align: center;
        line-height: 64px;
        background: url("~@/assets/img_qingqin/module2/rank_mark_normal_bg.png")
          no-repeat;
        background-size: 100% 100%;
        &.active,
        &:hover {
          background: url("~@/assets/img_qingqin/module2/rank_mark_active_bg.png")
            no-repeat;
          background-size: 100% 100%;
        }
      }
      & > *:last-child {
        background: url("~@/assets/img_qingqin/module2/rank_data_bg.png")
          no-repeat;
        background-size: 100% 100%;
        width: 1020px;
        height: 64px;
        line-height: 64px;
        padding-left: 30px;
        cursor: pointer;
        &.active,
        &:hover {
          background: url("~@/assets/img_qingqin/module2/rank_data_bg_active.png")
            no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }

  .l_circle {
    background: url("~@/assets/img_xinyong/module2/data_circle_bg.png")
      no-repeat;
    background-size: cover;
    height: 280px;
    width: 280px;
    position: relative;

    .text {
      position: absolute;
      bottom: -50px;
      text-align: center;
      width: 100%;
    }
    // padding-bottom: 20px;
  }
  .list_box {
    height: 339px;
    overflow-y: auto;
    color: #bfdaff;
    & > *:not(:first-child) {
      margin-top: 23px;
    }
  }
}
</style>
